<template>
  <div class="div">
    <a-row class="top_font">
      <a-col span="10" class="">
        <a-input addon-before="编号: " v-model="search.id"/>
      </a-col>
      <a-col span="10">
        <a-input style="margin-left: 16px" addon-before="角色: " v-model="search.roleComment"/>
      </a-col>
      <a-col span="4">
        <a-button
          style="margin-left: 32px"
          icon="search"
          type="primary"
          htmlType="submit"
          @click="searchList()"
        >查询</a-button>
      </a-col>
    </a-row>
    <a-row class="center_margin">
      <a-col span="10" class="">
        <a-input addon-before="权限：" v-model="search.url"/>
      </a-col>
      <a-col span="10">
        <a-input style="margin-left: 16px" addon-before="状态: " v-model="search.state"/>
      </a-col>
      <a-col span="4">
        <a-button
          icon="sync"
          style="margin-left: 32px"
          @click="reset()"
        >重置</a-button>
      </a-col>
    </a-row>
    <a-row class="bottom_font">
      <a-col class="title" span="3">
        编号
      </a-col>
      <a-col class="title" span="3">
        角色
      </a-col>
      <a-col class="title" span="3">
        权限名
      </a-col>
      <a-col class="title" span="3">
        权限
      </a-col>
      <a-col class="title" span="3">
        状态
      </a-col>
      <a-col class="title" span="4">
        备注
      </a-col>
      <a-col class="title" span="5">
        操作
      </a-col>
    </a-row>
    <a-list :data-source="data" :pagination="{onChange: (current, size) => {this.num = current,this.searchViews?this.searchInfo():this.getAll()}, showQuickJumper: true, pageSize: 15, total: totalList}">
      <a-list-item slot="renderItem" slot-scope="item,index">
        <a-col class="numb" span="3">
          {{ index }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.roleComment }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.permissions }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.url }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.state }}
        </a-col>
        <a-col class="numb" span="4">
          {{ item.authorityComment }}
        </a-col>
        <a-col class="numb" span="5">
          <a-button @click="edit(index)" type="link" size="small" class="operate_change">编辑</a-button>
          <a-button @click="del(index)" type="link" size="small" class="operate_change">删除</a-button>
          <a-button @click="dis(index)" type="link" size="small" class="operate_change">禁用</a-button>
        </a-col>
      </a-list-item>
    </a-list>
    <a-modal
      title="信息修改"
      style="top: 20px;"
      :width="800"
      v-model="editPermissions"
      @ok="handleOk()"
    >
      <a-form class="permission-form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色名称" hasFeedback>
          <a-input disabled v-model="roleComment"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限名" hasFeedback>
          <a-select :default-value="permissions" style="width: 100%">
            <a-select-option v-for="(item,index) in allPermissions" :key="item" @click="selectId(index)">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限" hasFeedback>
          <a-textarea autoSize disabled v-model="changeUrl"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" hasFeedback>
          <a-input disabled v-model="authorityComment"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { getAllPermissionsUrl, removeRoleAuthority, disRoleAuthority, searchRoleAuthority, updateRoleAuthority, getRoleAuthority } from '@/api/manage'
export default {
  data () {
      return {
        data: [],
        editPermissions: false,
        addPermissionsInfo: false,
        roleComment: '',
        searchViews: false,
        id: '',
        dataUrl: '',
        urls: '',
        allPermissions: [],
        permissions: '',
        totalList: 0,
        num: 1,
        changeUrl: '',
        allPermissionsUrl: '',
        authorityComment: '',
        search: { pageSize: 15, pageNum: 1, id: '', url: '', roleComment: '', state: '' },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      }
  },
  created () {
      this.getAll()
      this.getAllPermissionsUrl()
  },
  methods: {
    reset () {
      this.$set(this.search, 'pageNum', 1)
      this.$set(this.search, 'id', '')
      this.$set(this.search, 'url', '')
      this.$set(this.search, 'roleComment', '')
      this.$set(this.search, 'state', '')
      this.num = 1
      if (this.searchViews) {
        this.getAll()
      }
      this.searchViews = false
    },
    selectId (index) {
      this.changeUrl = this.allPermissionsUrl[index].url
      this.permissions = this.allPermissionsUrl[index].permissions
      // console.log(this.permissions)
      // console.log(index)
    },
    searchList () {
      this.num = 1
      this.searchInfo()
      this.searchViews = true
    },
    searchInfo () {
      this.$set(this.search, 'pageNum', this.num)
      searchRoleAuthority(this.search).then((res) => {
        this.data = res.datalist
        this.totalList = Number(res.total)
        // console.log(res)
        // console.log(this.data)
      })
    },
    getAllPermissionsUrl () {
      getAllPermissionsUrl().then((res) => {
        for (var i = 0; i < res.datalist.length; i++) {
          // console.log(res.datalist[i].permissions)
          this.allPermissions.push(res.datalist[i].permissions)
        }
        this.allPermissionsUrl = res.datalist
        // console.log(this.allPermissions)
      })
    },
    getAll () {
        const pageBase = { content: '', pageNum: this.num, pageSize: 15 }
        getRoleAuthority(pageBase).then((res) => {
            this.data = res.datalist
            this.totalList = Number(res.total)
            for (var i = 0; i < res.datalist.length; i++) {
              // console.log(res.datalist[i].id)
            }
        })
    },
    del (index) {
      // console.log('删除')
      const Id = { id: this.data[index].id }
      removeRoleAuthority(Id).then((res) => {
        // console.log('success')
      })
    },
    edit (index) {
      // console.log('编辑')
      this.id = this.data[index].id
      this.editPermissions = true
      this.roleComment = this.data[index].roleComment
      this.authorityComment = this.data[index].authorityComment
      this.changeUrl = this.data[index].url
      this.permissions = this.data[index].permissions
      // console.log(this.permissions)
    },
    dis (index) {
      // console.log('禁用')
      const Id = { id: this.data[index].id }
      disRoleAuthority(Id).then((res) => {
        // console.log('success')
      })
    },
    handleOk () {
      this.editPermissions = false
      const update = { id: this.id, permissions: this.permissions }
      updateRoleAuthority(update).then((res) => {
        // console.log('success')
      })
    },
    add () {
      this.addPermissionsInfo = true
    }
  }
}
</script>

<style scoped>
.div{
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 40px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
}
.inputround{
    width: 50%;
    border-radius: 25px;
    border-width: 1pX;
}
.top_font{
    font-size: larger;
}
.center_margin{
    margin-top: 10px;
    font-size: larger;
}
.img{
    height: 20px;
    width: 20px;
    border-radius: 100%;
    margin-left: 32px
}
.bottom_font{
    font-size: larger;
    margin-top: 10px;
    background-color: rgba(241, 247, 247, 0.979);

}
.title{
    text-align: center;
}
.numb{
  text-align: center;
  word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.operate_change{
    color: chartreuse;
    margin-right: 2px;
}

.operate_delete{
    color: crimson;
     margin-right: 2px;
}

.operate_stop{
    color: darkkhaki;
     margin-right: 2px;
}

.operate_add{
    color:darkturquoise;
    margin-right: 2px;
}
</style>
